
<html lang="en"   xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <style type="text/css">
        #container{
            width: 650px;
            height: 430px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>我要求助</legend>
</fieldset>

<div id="container">
    <form class="layui-form" th:action="@{/dona/add}" method="post"
          enctype="multipart/form-data" onsubmit="return checkInformation()">

        <div class="layui-form-item">
            <label class="layui-form-label">募捐主题</label>
            <div class="layui-input-block">
                <input type="text" name="DonaName" id="gName" placeholder="请输入募捐项目主题" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详情信息</label>
            <div class="layui-input-block">
                <textarea name="DonaDesc" id="gDetail" placeholder="请输入募捐详情信息" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">求助金额</label>
            <div class="layui-input-block">
                <input type="text" name="DonaPrice" id="gPrice" placeholder="请输入求助金额(元)" class="layui-input">
            </div>
        </div>
        <!-- 设置隐藏域 -->
        <input type="hidden" name="dona_state" value=0>
        <input type="hidden" name="dona_current" value=0>


        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">发起求助</button>
                <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>
<script th:inline="javascript">
    var layer;
    layui.use("layer",function () {
        layer = layui.layer;
    });

    //如果数据校验通过返回true，不通过则返回false
    function checkInformation() {
        //1.校验名称,先获取名称
        var name =document.getElementById("gName").value;
        if(name == ""){
            layer.msg("请输入募捐主题！");
            //alert("请输入募捐主题！");
            return false;
        }else if(name.length<1 || name.length>9){
            layer.msg("募捐主题长度必须为1-9个字符！");
            //alert("类别名称长度必须为2-40个字符！");
            return false;
        }

        //详情信息
        var num =document.getElementById("gDetail").value;
        if(num == ""){
            layer.msg("请输入详情信息！");
            //alert("请输入商品数量！");
            return false;
        }else if(num.length<2 || num.length>40){
            layer.msg("详情信息长度必须为2-40个字符！");
            //alert("商品数量长度必须为1-9个字符！");
            return false;
        }

        //求助金额
        var price =document.getElementById("gPrice").value;
        if(price == ""){
            layer.msg("请输入求助金额！");
            //alert("请输入求助金额！");
            return false;
        }else if(price.length<1 || price.length>9){
            layer.msg("商品价格长度必须为1-9个字符！");
            //alert("商品价格长度必须为1-9个字符！");
            return false;
        }
        return true;
    }
</script>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>

</body>
</html>
